<template>
  <view class="admin-container">
    <view class="header">
      <text class="title">学校管理</text>
      <u-button type="primary" @click="S.handleAddSchool" icon="plus">添加学校</u-button>
    </view>

    <view class="content">
      <u-search placeholder="搜索学校..." v-model="S.searchKeyword.value" @search="S.handleSearch"></u-search>

      <u-list class="school-list">
        <u-list-item v-for="(school, index) in S.filteredSchools.value" :key="index">
          <view class="school-item">
            <view class="school-info">
              <text class="school-name">{{ school.name }}</text>
            </view>
            <view class="actions">
              <u-button 
                size="mini" 
                type="info" 
                plain
                @click="showActionMenu(school)"
                class="more-button"
              >
                <u-icon name="more-dot-fill" size="18" color="#666"></u-icon>
              </u-button>
            </view>
          </view>
        </u-list-item>
      </u-list>
    </view>

    <!-- 操作菜单 -->
    <u-action-sheet 
      :show="actionMenuVisible" 
      :actions="actionMenuOptions" 
      @close="actionMenuVisible = false"
      @select="handleActionSelect"
    ></u-action-sheet>

    <admin-school-modal />
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import "jbecool/jbecool.uniapp.min.js";
import "@/js/common.js";
import S from "@/js/admin/school.js";

// 操作菜单相关
const actionMenuVisible = ref(false);
const actionMenuOptions = ref([
  { name: '学院管理', value: 'manage_colleges' },
  { name: '编辑', value: 'edit' },
  { name: '删除', value: 'delete' }
]);
const selectedSchool = ref(null);

// 页面加载时获取数据
onMounted(async () => {
  await S.loadSchools();
});

// 显示操作菜单
const showActionMenu = (school) => {
  selectedSchool.value = school;
  actionMenuVisible.value = true;
};

// 处理操作选择
const handleActionSelect = (e) => {
  const action = e.value;
  if (action === 'manage_colleges') {
    S.navigateToColleges(selectedSchool.value);
  } else if (action === 'edit') {
    S.handleEditSchool(selectedSchool.value);
  } else if (action === 'delete') {
    S.handleDeleteSchool(selectedSchool.value);
  }
  actionMenuVisible.value = false;
};
</script>

<style scoped>
.admin-container {
  padding: 20px;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.title {
  font-size: 24px;
  font-weight: bold;
}

.content {
  background-color: #fff;
  border-radius: 8px;
  padding: 15px;
}

.school-list {
  margin-top: 15px;
}

.school-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 0;
  border-bottom: 1px solid #f0f0f0;
}

.school-item:last-child {
  border-bottom: none;
}

.school-name {
  font-size: 16px;
  font-weight: 500;
}

.actions {
  display: flex;
  gap: 5px;
}

.more-button {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
</style>